<template>
    <div class="cate">
        <!-- <van-search
      shape="round"
      background="#ccc"
      placeholder="请输入搜索关键词"
      disabled
      @click="serachClick"
    /> -->
    <div class="classification">
      <div class="left-bar">
          <van-sidebar v-model="activeKey" >
          <van-sidebar-item v-for="(item,index) in categoryList" :key="index" :title="item.name" @click="chanSidebar(index)"/>
        </van-sidebar>
      </div>
      <div class="right-bar">
        <div class="shadow1">
          <img :src="currentCategory.banner_url" alt="">
          <p>{{currentCategory.front_name}}</p>
        </div>
        <div class="wenti-title">
               <p>{{currentCategory.name}}</p> 
               <span></span>
        </div>
        <van-grid :column-num="3">
        <van-grid-item v-for="item in currentCategory.subCategoryList" :key="item.id" :icon="item.wap_banner_url" :text="item.name" />
        </van-grid>
      </div>
    </div>

    </div>
</template>

<script>
// import {mapState,mapMutations} from "vuex"
import {getCatalog,getCatalogCurrent} from "@/request/api"
export default {
    data () {
        return {
          categoryList:[],  //左侧内容
          currentCategory:[],   //右侧内容
          activeKey: 0,
          // id:1005000
        }
    },
    created(){
      getCatalog().then(res=>{
        let {categoryList}=res.data
        this.categoryList=categoryList
        // console.log(categoryList);
      }),
      getCatalogCurrent({
        id:1005000
      }).then(res=>{
        let {currentCategory} =res.data
        this.currentCategory=currentCategory
        // console.log(res.data);
      })
    },
    methods:{
      serachClick(){
      this.$router.push('/home/searchpopup')
      // this.$router.push('/searchpopup')
      // 修改vuex中的值,本质是调用chanshadow方法
      this.chanShadow(true)
    },
    // 点击分类时切换
    chanSidebar(i){
      getCatalogCurrent({
        id:this.categoryList[i].id
      }).then(res=>{
        // console.log(res.data);
        let {currentCategory} =res.data
        this.currentCategory=currentCategory
      })
    }
    }
}
</script>
 
<style lang = "less" scoped>
.cate{
  background-color: #fff;
}
    .classification{
      display: flex;
      .left-bar{
        /* width: 100px; */
        height: 100vh;
        background-color: #f7f8fa;
        .van-sidebar{
          width: 100px;
        }
      }
      .right-bar{
        flex: 1;
        .shadow1{
          height: 145px;
          margin: 10px;
          border-radius: 10px;
          box-shadow: 0 0 6px #000;
          position: relative;
          /* background-color: #bfa; */
          img{
            width: 100%;
            height: 100%;
            border-radius: 10px;
            filter: brightness(.5);
          }
          p{
            color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            line-height: 145px;
          }
        }
        .wenti-title{
          position: relative;
          height: 50px;
          p{
              width: 120px;
              height: 40px;
              line-height: 40px;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              margin: auto;
              background-color: #fff;
              z-index: 9;
              text-align: center;
          }
          span{
              width: 50%;
              height: 3px;
              background-color: #ccc;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              margin: auto;
              z-index: 8;
          }
      }
      }
    }
</style>